<template>
    <div class="custom-icon" :class="{ active: selected == id }">
        <el-icon :size="28">
            <slot></slot>
        </el-icon><br>
        {{ title }}
    </div>
</template>

<script setup lang="ts">
defineProps<{
    title: String,
    id: Number,
    selected: Number
}>();



</script>

<style scoped>
.custom-icon {
    cursor: pointer;
    font-size: 12px;
    color:#ffffff;
}

.active {
    color: rgb(248, 141, 0);
    cursor: pointer;
    font-size: 12px;
}

.custom-icon:hover {
    color: rgb(248, 141, 0);
}

.custom-icon:active {
    color: rgb(248, 141, 0);
}
</style>